<template>
  <div class="opus-list">
    <Row :gutter="16">
      <Col :xs="24" :lg="12"  >
        <Table 
          border
          height="500"
          :columns="columns"
          :data="opuslist">
        </Table>
      </Col>
      <Col :xs="24" :lg="12" class="opusedit">
        <router-view ></router-view >
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name:"TheOpusList",
  data () {
    return {
      columns: [
        {
          title: 'ID',
          key: 'id',
          width: 60,
        },
        {
          title: '标题',
          key: 'title' 
        },
        {
          title: '分类',
          key: 'classid',
          sortable: true,
          render: (h, {column,index,row}) => {
            return h('span', this.navName(row.classid));
          }
        },
        {
          title: '修改时间',
          key: 'update_time' ,
          width: 110,
        },
        {
          title: '编辑',
          key: 'id',
          width: 100,
          align:"center",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  icon:"ios-clipboard",
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                      this.show(params.row.id)
                  }
                }
              }, '编辑')
            ]);
          },
          renderHeader:(h, params)=>{
            return h('Button', {
              props: {
                type: 'primary',
                icon: 'android-add-circle',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.addOpus(params)
                }
              }
            }, '新增');
          }
        },
      ],
    }
  },
  created(){
    
  },
  computed:{
    opuslist:function(){
      return this.$store.state.base.opusList;
    },
    
  },
  methods: {
    navName:function(id){
      let navArr=this.$store.state.base.navArr.filter(function(item){
        return item.id == id && item.status > 0;
      });
      let nav;
      [nav]=navArr;
      if(nav){
        return nav.title;
      }
    },
    show:function(id){
      this.$router.push({ name: 'opus', params: { id: id }})
    },
    addOpus:function(params){
      this.$router.push({ name: 'opus', params: { id: -1 }})
    }
  }
}
</script>
<style>
  .opusedit{
    background: #f8f8f9;
    border-radius: 0.5rem;
  }
</style>